<template>
    <div class="left">
        <el-menu :default-active="active" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="red" style="height:100%" @select="lesectRouter" :collapse="isCollapse">
            <div class="leff-top">
                <img src="@/assets/logo.png" alt="">
                <div class="div text-one" v-if="!isCollapse">后台管理平台达瓦达瓦达瓦大</div>
            </div>
            <div class="list" v-for="(item,index) in rouerList" :key="index">
                <el-menu-item :index="item.path"  v-if="!item.chilred">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
                <el-submenu index="1"  v-else>
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">{{item.name}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="(childern,childrenIndex) in item.chilred" :key="childrenIndex" :index="childern.path">{{childern.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </div>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Left",
        data() {
            return {
                rouerList: [{
                        path: '/index',
                        name: '首页'
                    },
                    {
                        name: "功能",
                        chilred: [{
                                path: '/forms',
                                name: 'Forms页面'
                            },
                            {
                                path: '/icon',
                                name: 'Icon页面'
                            }
                        ]
                    }
                ]
            };
        },
        computed: {
            isCollapse: function () {
                return this.$store.state.unfold
            },
            active: function () {
                return this.$store.state.active
            }
        },
        methods: {
            lesectRouter(key) {
                console.log(key);
                this.$router.push(key)
            }
        }
    }
</script>

<style scoped lang="less">
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 100%;
    }

    .left {
        width: 100%;
        height: 100%;

        .leff-top {
            display: flex;
            width: 100%;
            height: 50px;

            .div {
                line-height: 50px;
            }
        }
    }
</style>